<template>
  <div class="hello">
    <div class="test">
      <div>{{ language }}</div>
      <button @click="setLanguage()">切换语言</button>
    </div>
    <div>
      <div>{{ $t('hello') }}</div>
      <div>{{ $t('world') }}</div>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" :label="$t('date')" width="180"></el-table-column>
        <el-table-column prop="name" :label="$t('name')" width="180"></el-table-column>
        <el-table-column prop="address" :label="$t('address')"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      language: localStorage.getItem('lang') || 'zh',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  methods: {
    setLanguage() {
      this.language = this.language === 'zh' ? 'en' : 'zh'
      this.$i18n.locale = this.language
      localStorage.setItem('lang', this.language)
    },
  },
}
</script>

